<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>

        // 通过?传递的参数在vue-router中如何获取

        // 例子： http://xx.com/index.html#/detail?id=123
        // 参数信息： id=123
        // 如何获取id

        let Detail = {
            template: "<div>这是详情页, 用户传进来的参数是{{$route.query.id}}</div>",
            created(){
                //当组件被路由匹配到之后
                //组件被创建出来的时候，组件对象会新增一个属性$route
                //$route属性中包含了所有和当前路由相关的信息
                        //path  路径信息
                        //hash  hash值信息(模拟出来的)
                        //query ?传递的参数信息
                        //name  路由的名字
                        //params 路由参数！

                //如果要获取?传递的参数，我们可以使用 this.$route.query
                // console.log(this.$route)
            }
        }

        let router = new VueRouter({
            routes: [
                {
                    path: "/detail",
                    component: Detail
                }
            ]
        })

        var vm = new Vue({
            el: "#app",
            data: {
            },
            router
        })
    </script>
</body>

</html>